<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="创建人"
              v-model="queryPrams.blogUserName"
              prop="blogUserName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="文章类型"
              v-model="queryPrams.blogType"
              :options="[
                ['1', '分享'],
                ['2', '求助'],
              ]"
              prop="blogType"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="文章分类"
              v-model="queryPrams.blogBelong"
              :options="[
                [1, 'Vue'],
                [2, 'React'],
                [3, 'Node'],
                [4, 'Mongodb'],
                [5, 'Uni-app'],
                [6, '小程序'],
                [7, 'CSS'],
                [8, 'JaveScript'],
                [9, '其他'],
              ]"
              prop="blogBelong"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>

          <el-col :span="8">
            <BaseSelect
              label="文章状态"
              v-model="queryPrams.blogStatus"
              :options="[
                [0, '审核中'],
                [1, '审批通过'],
                [2, '已冻结'],
                [3, '已驳回'],
              ]"
              prop="blogStatus"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <div class="actionList">
        <BaseButton :icon="Plus" @handleClick="handleAdd">新增</BaseButton>
      </div>
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        style="width: 100%"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="80" />

        <el-table-column
          prop="blogId"
          align="center"
          label="文章ID"
          width="150"
        />

        <el-table-column prop="blogType" align="center" label="文章类型">
          <template #default="scope">
            <span>{{ blogType.get(scope.row.blogType) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="blogBelong" align="center" label="文章分类">
          <template #default="scope">
            <span>{{ blogBelong.get(scope.row.blogBelong) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="blogTag" align="center" label="文章标签">
          <template #default="scope">
            <span>{{ blogTag.get(scope.row.blogTag) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="blogStatus" align="center" label="文章状态">
          <template #default="scope">
            <span>{{ blogStatus.get(scope.row.blogStatus) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="blogCreateTime"
          align="center"
          label="创建时间"
          width="170"
        />

        <el-table-column fixed="right" width="220" align="center">
          <template #header>
            <span>操作</span>
          </template>
          <template #default="scope">
            <el-button size="small" @click="handleView(scope.row)"
              >预览</el-button
            >
            <el-button size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-show="scope.row.blogStatus === 0"
              size="small"
              type="primary"
              @click="handleCheck(scope.row)"
              >审批</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <BasePagination
        :pageSourse="pageSourse"
        :pageSizes="[10, 20, 30, 50]"
        :queryPrams="queryPrams"
        :listUrl="pageUrl.list"
        layout="total, pager, jumper, sizes"
        @onSearch="getListData(pageUrl.list)"
      >
      </BasePagination>
    </div>
    <checkModal
      ref="checkModalRef"
      @refresh="getListData(pageUrl.list)"
    ></checkModal>
  </div>
</template>

<script setup lang="ts" name="admin-user">
import * as api from "@/api/index";
import { SearchArea } from "@components/FormSearch/index";
import {
  BaseInput,
  BaseSelect,
  BaseButton,
  BaseModal,
  BaseDate,
} from "@components/BaseForm/index";
import type { FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { ElMessage as message } from "element-plus";
import { postAction } from "@/api/request";
import router from "@/router";
import checkModal from "./modules/check-modal.vue";
interface checkModalRefType {
  handleShow: (item?: objectType<any>) => void;
}
// 弹窗实例
let checkModalRef = ref<checkModalRefType | null>(null);
let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// 列表相关API
let pageUrl = {
  list: api.User.URL_BLOGLIST,
  del: api.User.URL_BLOGDEL,
};

// form表单实例
let modelForm: any = ref();
// 检索区元素
const searchBox: any = ref(null);

// table渲染高度
let tableHeight = ref(600);

onMounted(() => {
  // 页面挂载完成后获取列表数据
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});

let blogStatus = new Map([
  [0, "审核中"],
  [1, "审批通过"],
  [2, "已冻结"],
  [3, "已驳回"],
]);

let blogTag = new Map([
  [1, "置顶"],
  [2, "热门"],
  [3, "原创"],
  [4, "精华"],
  [5, "推荐"],
  [6, "最新"],
]);

let blogBelong = new Map([
  [1, "Vue"],
  [2, "React"],
  [3, "Node"],
  [4, "Mongodb"],
  [5, "Uni-app"],
  [6, "小程序"],
  [7, "CSS"],
  [8, "JaveScript"],
  [9, "其他"],
]);

let blogType = new Map([
  [1, "分享"],
  [2, "求助"],
]);

let handleAdd = () => {
  // 跳转新增页
  router.push("/note/blog-add");
};

let handleView = (item: any) => {
  // 跳转预览页
  router.push(`/note/blog-view?blogId=${item.blogId}`);
};
let handleEdit = (item: any) => {
  // 跳转编辑页
  router.push(`/note/blog-edit?blogId=${item.blogId}`);
};

let handleCheck = (item: any) => {
  if (checkModalRef.value) {
    checkModalRef.value.handleShow({
      visible: true,
      id: item.blogId,
    });
  }
};
</script>

<style lang="less" scoped>
:deep(.el-table) {
  tr {
    height: 54px;
  }
}
.container {
  padding: 0px 24px;
  box-sizing: border-box;
  .list {
    .actionList {
      display: flex;
      justify-content: right;
      padding: 8px 16px;
    }
  }
}
</style>
